{extend name='common/container'}
{block name="content"}
<div style="margin:0 15px 15px 15px;">
	<el-card shadow="never" style="min-height:650px;">
		<div v-if="search_visible" id="search" class="search">
			<el-form ref="form" size="small" :model="searchData" inline>
				<el-form-item label="编号">
					<el-input id="resourcse_id" v-model="searchData.resourcse_id"  style="width:150px;" placeholder="请输入编号"></el-input>
				</el-form-item>
				<el-form-item label="添加时间">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="daterange" v-model="searchData.add_time" clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
				</el-form-item>
				<el-form-item label="联系人">
					<el-input id="name" v-model="searchData.name"  style="width:150px;" placeholder="请输入联系人"></el-input>
				</el-form-item>
				<el-form-item label="手机号码">
					<el-input id="mobile" v-model="searchData.mobile"  style="width:150px;" placeholder="请输入手机号码"></el-input>
				</el-form-item>
				<el-form-item label="跟单方式">
					<el-select style="width:150px" v-model="searchData.documentary_mothod" filterable clearable placeholder="请选择">
						<el-option key="0" label="电话沟通" value="1"></el-option>
						<el-option key="1" label="微信交流" value="2"></el-option>
						<el-option key="2" label="QQ/旺旺" value="3"></el-option>
						<el-option key="3" label="电子邮箱" value="4"></el-option>
						<el-option key="4" label="上门拜访" value="5"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="客户类型">
					<el-select style="width:150px" v-model="searchData.connection_type" filterable clearable placeholder="请选择">
						<el-option key="0" label="保护客户" value="1"></el-option>
						<el-option key="1" label="收藏客户" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态">
					<el-select style="width:150px" v-model="searchData.status" filterable clearable placeholder="请选择">
						<el-option key="0" label="正常" value="1"></el-option>
						<el-option key="1" label="禁用" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="进展">
					<el-select style="width:150px" v-model="searchData.evolve" filterable clearable placeholder="请选择">
						<el-option key="0" label="待访问客户" value="1"></el-option>
						<el-option key="1" label="考虑客户" value="2"></el-option>
						<el-option key="2" label="无效客户" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="微信号">
					<el-input id="weixin" v-model="searchData.weixin"  style="width:150px;" placeholder="请输入微信号"></el-input>
				</el-form-item>
				<search-tool :search_data.sync="searchData" @refesh_list="index"></search-tool>
			</el-form>
		</div>
		<div class="btn-group" style="margin-top:10px;margin-bottom:10px;">
			<div>
				<el-button v-for="item in button_group" :key="item.access" v-if="checkPermission(item.access,'{:implode(',',session('admin.access'))}','{:session('admin.role_id')}',[1])" :disabled="$data[item.disabled]" :type="item.color" size="mini" :icon="item.icon" @click="fn(item.clickname)">
					<span v-if="item.batch" v-text="$data['batchUpdateStatus']?'批量保存':'批量编辑'"></span>
					<span v-else v-text="item.name"></span>
				</el-button>
			</div>
			<div><table-tool :search_visible.sync="search_visible"   @refesh_list="index"></table-tool></div>
		</div>
		<el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="resourcse_id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @sort-change='sortChange' v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">
			<el-table-column align="center" type="selection" width="42"></el-table-column>
			<el-table-column align="left"  property="add_time"  label="添加时间" show-overflow-tooltip width="">
				<template slot-scope="scope">
					{{parseTime(scope.row.add_time,'{y}-{m}-{d}')}}
				</template>
			</el-table-column>
			<el-table-column align="center" property="save_display" label="跟单状态"  show-overflow-tooltip width="">
				<teplate slot-scope="scope">
					<el-tag type="primary" v-if="scope.row.save_display == '0'" size="mini" effect="dark">未跟单</el-tag>
					<el-tag type="primary" v-if="scope.row.save_display == '1'" size="mini" effect="dark" style="color:red">已跟单</el-tag>
				</teplate>
			</el-table-column>
			<el-table-column align="left"  property="name"  label="联系人" show-overflow-tooltip width="">
			</el-table-column>
			<el-table-column align="left"  property="mobile"  label="手机号码" show-overflow-tooltip width="">
			</el-table-column>
			<el-table-column align="right"  property="info"  label="资源描述" show-overflow-tooltip width="120">
			</el-table-column>
			<el-table-column align="right"  property="sell"  label="租金转让" show-overflow-tooltip width="220">
			</el-table-column>
			<el-table-column align="center"  property="click"  label="点击" show-overflow-tooltip width="">
			</el-table-column>
			<el-table-column align="right"  property="doucmentary_num"  label="跟单次数" show-overflow-tooltip width="">
			</el-table-column>
			<el-table-column align="right"  property="documentary_info"  label="跟单详情" show-overflow-tooltip width="">
			</el-table-column>
			<el-table-column align="center"  property="documentary_mothod"  label="跟单方式" show-overflow-tooltip width="">
				<template slot-scope="scope">
					<el-tag type="primary" v-if="scope.row.documentary_mothod == '1'" size="mini" effect="dark">电话沟通</el-tag>
					<el-tag type="primary" v-if="scope.row.documentary_mothod == '2'" size="mini" effect="dark">微信交流</el-tag>
					<el-tag type="primary" v-if="scope.row.documentary_mothod == '3'" size="mini" effect="dark">QQ/旺旺</el-tag>
					<el-tag type="primary" v-if="scope.row.documentary_mothod == '4'" size="mini" effect="dark">电子邮箱</el-tag>
					<el-tag type="primary" v-if="scope.row.documentary_mothod == '5'" size="mini" effect="dark">上门拜访</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center"  property="status"  label="状态" show-overflow-tooltip width="">
				<template slot-scope="scope">
					<el-switch @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
				</template>
			</el-table-column>
			<el-table-column align="right"  property="evolve"  label="进展" show-overflow-tooltip width="">
				<template slot-scope="scope">
					<el-tag type="primary" v-if="scope.row.evolve == '1'" size="mini" effect="dark">待访问客户</el-tag>
					<el-tag type="success" v-if="scope.row.evolve == '2'" size="mini" effect="dark">考虑客户</el-tag>
					<el-tag type="danger" v-if="scope.row.evolve == '3'" size="mini" effect="dark">无效客户</el-tag>
				</template>
			</el-table-column>
			<el-table-column :fixed="ismobile()?false:'right'" label="操作" align="center" width="270">
				<template slot-scope="scope">
					<div v-if="scope.row.resourcse_id">
						<el-button v-if="checkPermission('/admin/Resource/detail.html','{:implode(",",session("admin.access"))}','{:session("admin.role_id")}',[1])" size="mini" icon="el-icon-view" type="info" @click="detail(scope.row)" >查看跟单</el-button>
						<el-button v-if="checkPermission('/admin/Resource/dialogUrl.html','{:implode(",",session("admin.access"))}','{:session("admin.role_id")}',[1])" size="mini" icon="el-icon-plus" type="warning" @click="dialogUrl(scope.row)" >跟单记录</el-button>
						<button v-on:click="click_test(scope.row.mobile,scope.row)">测试服务</button>
						<div id="heartdiv" style="display: none">{{callConnectInfo}}</div>
						<div style="display: none">{{phonestatus}}</div>
						<div style="display:none">{{popupscreen}}}</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
	</el-card>

	<!--添加-->
	<Add :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index"></Add>
	<!--修改-->
	<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refesh_list="index"></Update>
	<!--查看跟单-->
	<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refesh_list="index"></Detail>
	<!--跟单记录-->
	<DialogUrl :info="dialogUrlInfo" :show.sync="dialog.dialogUrlDialogStatus" size="small"></DialogUrl>

</div>

{/block}
{block name="script"}
<script src="__PUBLIC__/assets/js/app.js"></script>
<script src="__PUBLIC__/components/admin/resource/add.js?v=<?php echo rand(1000,9999)?>"></script>
<script src="__PUBLIC__/components/admin/resource/update.js?v=<?php echo rand(1000,9999)?>"></script>
<script src="__PUBLIC__/components/admin/resource/detail.js?v=<?php echo rand(1000,9999)?>"></script>
<script src="__PUBLIC__/components/admin/resource/dialogUrl.js?v=<?php echo rand(1000,9999)?>"></script>

<script src="__PUBLIC__/assets/js/voip.js"></script>
<script src="__PUBLIC__/assets/js/tcpsocket.js"></script>
<script src="__PUBLIC__/assets/js/jquery.md5.js"></script>
<script src="../vendor/8baicall/voip.js"></script>
<!--<script src="__PUBLIC__/components/admin/resource/voiptext.js"></script>-->
<!--<script src="__PUBLIC__/components/admin/resource/test.js"></script>-->


<script>
</script>
<script>
	new Vue({
		el: '#app',
		components:{
		},
		data: function() {
			return {
				dialog: {
					addDialogStatus : false,
					updateDialogStatus : false,
					detailDialogStatus : false,
					dialogUrlDialogStatus : false,
				},
				searchData:{},
				button_group:[
					{name:'添加',color:'success',access:'/admin/Resource/add.html',icon:'el-icon-plus',disabled:'',clickname:'add'},
					{name:'修改',color:'primary',access:'/admin/Resource/update.html',icon:'el-icon-edit',disabled:'single',clickname:'update'},
					{name:'删除',color:'danger',access:'/admin/Resource/delete.html',icon:'el-icon-delete',disabled:'multiple',clickname:'del'},
					{name:'查看跟单',color:'info',access:'/admin/Resource/detail.html',icon:'el-icon-view',disabled:'single',clickname:'detail'},
					{name:'跟单记录',color:'warning',access:'/admin/Resource/dialogUrl.html',icon:'el-icon-plus',disabled:'single',clickname:'dialogUrl'},
					{name:'保护客户',color:'',access:'/admin/Resource/protect.html',icon:'',disabled:'',clickname:'protect'},
				],
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				order:'',
				sort:'',
				ids: [],
				single:true,
				multiple:true,
				search_visible:true,
				list: [],
				updateInfo:{},
				detailInfo:{},
				dialogUrlInfo:{},
				voip : new voipCall(),
				callConnectInfo:'',
				phonestatus:'',
				popupscreen:'',
			}
		},
		methods:{
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page,order:this.order,sort:this.sort}
				Object.assign(param, this.searchData,this.urlobj)
				this.loading = true
				axios.post(base_url + '/Resource/index',param).then(res => {
					if(res.data.status == 200){
						this.list = res.data.data.data
						this.page_data.total = res.data.data.total
						this.loading = false
					}else{
						this.$message.error(res.data.msg);
					}
				})
			},
			click_test:function(mobile,row){
				//var voip  = new voipCall()
				callConnectInfo_whole = ''
				phonestatus_whole = ''
				popupscreen_whole = ''

				//初始化数据
				this.voip.init('https://ai.800ing.com/');

				//console.log(voip)
				this.voip.CallBack_login = function(code){
					if(code==0){
						callConnectInfo_whole = '链接成功'
					}else{
						callConnectInfo_whole = '链接失败'
					}
				}
				this.voip.userlogin(102879801,102879801);
				//console.log(voip)
				this.callConnectInfo = callConnectInfo_whole

				//处理显示信息
				this.voip.CallUserInfo = function(olduser,newuser){
					var bb = olduser==null||olduser.waterLine<newuser.waterLine;
					if(newuser.phoneStatus==0||newuser.phoneStatus==1){
						if(olduser!=null&&olduser.waterLine<newuser.waterLine&&(olduser.phone!=null&&olduser.phone!="")){
							var peer = '呼出';
							if(olduser.phonepeer==2){
								peer = '呼入';
							}
							phonestatus_whole = "电话："+olduser.phone+"已挂机,cdrId:"+olduser.cdrId+",方向："+peer;
							//$("#popupscreendiv").append("电话："+olduser.phone+"已挂机,cdrId:"+olduser.cdrId+",方向："+peer);
						}else if((newuser.phone==""||newuser.phone==null)&&newuser.phoneStatus==0){
							phonestatus_whole = "空闲状态,可以拔打新的电话";
						}
					}else if(bb){
						if(olduser!=null&&olduser.phone!=newuser.phone&&olduser.phone!=""&&newuser.phoneStatus>=3){
							var peer = '呼出';
							if(olduser.phonepeer==2){
								peer = '呼入';
							}
							phonestatus_whole = "电话："+olduser.phone+"已挂机,cdrId:"+olduser.cdrId+",方向："+peer;
							//$("#popupscreendiv").append("电话："+olduser.phone+"已挂机,cdrId:"+olduser.cdrId+",方向："+peer);
						}
						var peer = '呼出';
						if(newuser.phonepeer==2){
							peer = '呼入';
						}
						switch(newuser.phoneStatus){
							case 3:phonestatus_whole = "电话："+newuser.phone+"拨号,方向："+peer;
								break;
							case 4:phonestatus_whole = "电话："+newuser.phone+"呼出响铃,方向："+peer;
								break;
							case 5:phonestatus_whole = "电话："+newuser.phone+"呼入响铃,方向："+peer;
								break;
							case 6:phonestatus_whole = "电话："+newuser.phone+"接通,方向："+peer;
								break;
							case 7:phonestatus_whole = "电话："+newuser.phone+"忙,正在通话";
								break;
						}
						//$("#popupscreendiv").append("电话："+newuser.phone+"已挂机,phoneStatus:"+newuser.phoneStatus+",方向："+peer);
					}
				}

				this.phonestatus = phonestatus_whole

				// 显示消息
				this.voip.ShowMsg = function(obj){
					popupscreen_whole = 'msg：'+JSON.stringify(obj)+'<br>';
				}

				this.popupscreen = popupscreen_whole

				//拔号
				// var phone = mobile;
				// if(phone==null||phone.length<3){
				// 	alert("电话号码不能为空");
				// }
				// voip.CallPhone(phone,function(data){
				// 	if(data.code==0){
				// 		//$("#popupscreendiv").append("拔号成功："+$("#phoneno").val()+"<br>");
				// 	}else{
				// 		//$("#popupscreendiv").append("拔号失败："+data.message+"<br>");
				// 	}
				// })
			},
			updateExt(row,field){
				if(row.resourcse_id){
					axios.post(base_url + '/Resource/updateExt',{resourcse_id:row.resourcse_id,[field]:row[field]}).then(res => {
						if(res.data.status == 200){
							this.$message({message: res.data.msg, type: 'success'})
						}else{
							this.$message.error(res.data.msg)
						}
					})
				}
			},
			add(){
				this.dialog.addDialogStatus = true
			},
			update(row){
				let id = row.resourcse_id ? row.resourcse_id : this.ids.join(',')
				axios.post(base_url + '/Resource/getUpdateInfo',{resourcse_id:id}).then(res => {
					if(res.data.status == 200){
						this.dialog.updateDialogStatus = true
						this.updateInfo = res.data.data
					}else{
						this.$message.error(res.data.msg)
					}
				})
			},
			del(row){
				this.$confirm('确定操作吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let ids = row.resourcse_id ? row.resourcse_id : this.ids.join(',')
					axios.post(base_url + '/Resource/delete',{resourcse_id:ids}).then(res => {
						if(res.data.status == 200){
							this.$message({message: res.data.msg, type: 'success'})
							this.index()
						}else{
							this.$message.error(res.data.msg)
						}
					})
				}).catch(() => {})
			},
			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {resourcse_id:row.resourcse_id ? row.resourcse_id : this.ids.join(',')}
			},
			dialogUrl(row){
				let ids = row.resourcse_id ? row.resourcse_id : this.ids.join(',')
				let data = {}
				this.list.forEach((item,i) => {
					if(item.resourcse_id == ids){
						data = this.list[i]
					}
				})
				this.dialogUrlInfo = data
				this.dialog.dialogUrlDialogStatus = true
			},
			protect(){
				let param = {limit:this.page_data.limit,page:this.page_data.page,order:this.order,sort:this.sort}
				Object.assign(param, this.searchData,this.urlobj)
				this.loading = true
				axios.post(base_url + '/Resource/protect',param).then(res => {
					if(res.data.status == 200){
						this.list = res.data.data.data
						this.page_data.total = res.data.data.total
						this.loading = false
					}else{
						this.$message.error(res.data.msg);
					}
				})
			},
			selection(selection) {
				this.ids = selection.map(item => item.resourcse_id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex,event){
				if(event.target.className !== 'el-input__inner'){
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.resourcse_id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
			sortChange(val){
				if(val.order == 'descending'){
					this.order= 'desc'
				}
				if(val.order == 'ascending'){
					this.order= 'asc'
				}
				this.sort = val.prop
				this.index()
			},
			fn(method){
				this[method](this.ids)
			},
		},
		mounted(){
			this.index()

		},
	})
</script>
{/block}
